<template>
  <div style="padding: 24px;">
    <div
      style="font-size: 16px;font-weight: 500;color: #1D2129;margin-bottom: 16px;"
    >
      体育经费投入
    </div>
    <div style="display: flex; jiustify-content: space-between;">
      <div style="display: flex; width: 50%;">
        <div>
          <div style="font-size: 24px;color: #0F0F0F;">34,201</div>
          <div style="font-size: 12px;">体育经费总投入/万元</div>
        </div>
      </div>
      <div style="display: flex; width: 50%;">
        <div>
          <div style="font-size: 24px;color: #0F0F0F;">34,201</div>
          <div style="font-size: 12px;">当年体育生人均经费投入/元</div>
        </div>
      </div>
    </div>
    <div id="Chart4" style="width:100%;height:260px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      chartInstance: null
    };
  },
  mounted() {
    this.datalist();
  },

  methods: {
    datalist() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("Chart4"));
      // 指定图表的配置项和数据
      var option;
      option = {
        series: [
          {
            roam: "false",
            type: "treemap",
            data: [
              {
                name: "当前体育经费投入（万元）",
                value: 30,
                itemStyle: {
                  normal: {
                    borderColor: "#BEDAFF" //方块分割边框颜色
                  }
                }
              },
              {
                name: "用于传统项目校代表队（训练与比赛）经费（万元）",
                value: 20,
                itemStyle: {
                  normal: {
                    borderColor: "#E8FFFB" //方块分割边框颜色
                  }
                }
              },
              {
                name: "其中教育补助（万元）",
                value: 30,
                itemStyle: {
                  normal: {
                    borderColor: "#F7F8FA" //方块分割边框颜色
                  }
                }
              },
              {
                name: "其中体育局补助（万元）",
                value: 6,
                itemStyle: {
                  normal: {
                    borderColor: "#F5E8FF" //方块分割边框颜色
                  }
                }
              },
              {
                name: "本校自筹（万元）",
                value: 40,
                itemStyle: {
                  normal: {
                    borderColor: "#FFE4BA" //方块分割边框颜色
                  }
                }
              },
              {
                name: "其他经费（万元）",
                value: 8,
                itemStyle: {
                  normal: {
                    borderColor: "#FDF4BF" //方块分割边框颜色
                  }
                }
              }
            ]
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      // 监听父元素大小变化 刷新图表
      var ro = new ResizeObserver(entries => {
        for (let entry of entries) {
          const cr = entry.contentRect;
          myChart.resize();
        }
      });
      ro.observe(Chart);
    }
  }
};
</script>

<style scoped>
.dianidan {
  width: 7px;
  height: 7px;
  margin-right: 5px;
  margin-top: 3px;
}
</style>
